<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" width="600px" @closed="resetForm('form')" :close-on-click-modal="false">
			<div>
				<el-form ref="form" :rules="rules" :model="form" label-width="80px">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="选择图片" prop="picAddr">
								<ul class="pic-box">
									<li class="img-box" :style="'background-image: url(' + form.httpUrl + ');'" v-show="form.httpUrl"></li>
									<el-tooltip class="item" effect="light" :content="(form.httpUrl ? '替换' : '选择') + '图片'" placement="top">
										<li class="add-box" @click="selectFromNetDisk">
											<span class="add-pic-icon el-icon-plus"></span>
										</li>
									</el-tooltip>
									<!-- <el-button type="primary" icon="el-icon-folder-opened" class="select-pic-btn" @click="selectFromNetDisk">选择</el-button> -->
								</ul>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="图片名称" prop="name">
								<el-input v-model.trim="form.name" maxlength="50" show-word-limit></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="是否显示">
								<el-radio-group v-model="form.status">
									<el-radio label="1">显示</el-radio>
									<el-radio label="2">隐藏</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="排序" prop="orderBy">
								<el-input-number v-model="form.orderBy" :min="1" :max="1000" size="medium" label="排序"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="链接地址">
								<el-input v-model.trim="form.linkAddr"></el-input>
								<p class="txt-explain">注：如果图片链接位置是外来链接，必须以http://或https://开头</p>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="图片尺寸">
								<el-input v-model.trim="form.picW" style="width: 47%">
									<template slot="prepend">宽度</template>
									<template slot="append">像素</template>
								</el-input>
								<el-input v-model.trim="form.picH" style="width: 47%; float: right">
									<template slot="prepend">高度</template>
									<template slot="append">像素</template>
								</el-input>
								<p class="txt-explain">注：本图片的显示尺寸，-1 表示使用图片原始尺寸</p>
							</el-form-item>
						</el-col>

						<!-- <el-col :span="24">
              <el-form-item label="备注" prop="des">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="form.des"
                >
                </el-input>
              </el-form-item>
            </el-col> -->
					</el-row>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" v-preventReClick @click="submitForm('form')">提 交</el-button>
			</span>
		</el-dialog>
		<SelectImgFromNetDisk @emit="handleEmit" />
	</div>
</template>
<script>
export default {
	components: {
		SelectImgFromNetDisk: () => import('@/views/module/netDisk/selectFile/index.vue')
	},
	data() {
		return {
			title: '新增',
			dialogVisible: false,
			form: {
				columnId: '', //栏目
				des: '', //说明
				orderBy: 10, //排序
				status: '1',
				fileId: '',
				name: '',
				picAddr: '', //文件地址
				linkAddr: '', //链接地址
				picW: '-1', //宽度
				picH: '-1', //高度
				httpUrl: '',
				minAttrAddr: ''
			},
			rules: {
				name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
				picAddr: [{ required: true, message: '请输入图片地址', trigger: 'blur' }]
			}
		};
	},
	props: ['curColumn'],
	mounted() {
		this.$bus.$on('columnImageAdd', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('columnImageAdd');
	},
	methods: {
		selectFromNetDisk() {
			this.$bus.$emit('selectFile', { showType: 1 });
		},
		handleEmit(v) {
			let { id, attrAddr, httpUrl, minAttrAddr } = v[0];
			this.form.fileId = id;
			this.form.picAddr = attrAddr;
			this.form.httpUrl = httpUrl;
			this.form.minAttrAddr = minAttrAddr || attrAddr;
		},
		//显示弹窗
		init(row) {
			if (row) {
				this.form = { ...this.form, ...row };
				this.$set(this.form, 'id', row.id);
			} else {
				this.form = this.$options.data().form;
				this.$delete(this.form, 'id');
			}
			this.title = row ? '编辑' : '新增';
			this.dialogVisible = true;
		},
		submitForm(form) {
			this.form.columnId = this.curColumn.id;
			this.$refs[form].validate(async (valid) => {
				if (valid) {
					let dispatchType = this.title == '新增' ? 'addSysPicSource' : 'updateSysPicSource';
					await this.$store.dispatch(dispatchType, this.form);
					this.successMsg('操作成功');
					this.$bus.$emit('refreshPicSourceList');
					this.dialogVisible = false;
				}
			});
		},
		//重置表单
		resetForm(form) {
			this.$refs[form].resetFields();
		}
	}
};
</script>
<style scoped lang="scss">
.pic-box {
	position: relative;
	li {
		float: left;
		margin-right: 10px;
		width: 150px;
		height: 150px;
		background-size: cover;
		background-position: center;
		background-color: #fbfdff;
		border: 1px dashed #c0ccda;
		text-align: center;
		border-radius: 6px;

		.add-pic-icon {
			line-height: 150px;
			font-size: 28px;
			color: #8c939d;
		}
	}
	.add-box {
		cursor: pointer;
		&:hover {
			border-color: #409eff;
		}
	}
}
</style>
